<template>
  <div class="home" style="width: 100%; padding: 10px">
    <div style="margin: 10px 0">
      <el-input
        clearable
        v-model="search.name"
        placeholder="请输入姓名"
        style="width: 20%; margin-right: 10px"
      ></el-input>
      <el-input
        clearable
        v-model="search.phone"
        placeholder="请输入手机号"
        style="width: 20%; margin-right: 10px"
      ></el-input>

      <el-button type="primary" @click="load">查询</el-button>
    </div>
    <div style="display: flex; align-items: center; margin: 10px 0">
      <img
        src="..\..\public\ai.png"
        alt="图标"
        style="width: 80px; height: 80px; margin-right: 10px; margin-left: 10px"
      />
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8 }"
        clearable
        v-model="typedText"
        placeholder="AI 智能行动指引"
        style="margin: 10px 0; width: 38.8%; margin-right: 10px"
      ></el-input>
    </div>
    <!-- <div style="margin:10px 0;">
        <span class="text-button" >AI 指引</span>
        <el-input clearable v-model="suggest" placeholder="结果" style="width:39.5%;margin-right:10px;margin-left:10px;"></el-input>
      </div> -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="recName" label="收货人姓名" />
      <el-table-column prop="recAddress" label="收货地址" />
      <el-table-column prop="recPhone" label="收货电话" />
      <el-table-column prop="goodsName" label="订单内容" />
      <el-table-column prop="arriveTime" label="收货时间" />
      <el-table-column prop="merchantName" label="店铺信息" />
    </el-table>
  </div>
</template>
  
  <script>
import { request } from "@/utils/request";
import axios from "axios";

export default {
  name: "HomeView4",
  components: {},
  data() {
    return {
      typedText: "", // 当前已渲染的文本
      isTyping: true, // 是否正在打字
      typingInterval: 100, // 打字间隔（毫秒）
      typingTimer: null, // 定时器ID
      search: {
        name: "",
        phone: "",
        idCard: "",
      },
      suggest: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  beforeDestroy() {
    this.stopTyping();
  },
  methods: {
    load() {
      axios
        .post("/api/cleanHouse/all", {
          name: this.search.name,
          phone: this.search.phone,
          idNumber: this.search.idCard,
          //pageNum: this.currentPage,
          //pageSize: this.pageSize
        })
        .then((response) => {
          const result = response.data;
          this.tableData = result.result;
          this.suggest = result.suggestion;
          this.typedText = "";
          this.startTyping();
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    startTyping() {
      this.typingTimer = setInterval(() => {
        if (this.typedText.length < this.suggest.length) {
          this.typedText += this.suggest[this.typedText.length];
        } else {
          this.stopTyping();
        }
      }, this.typingInterval);
    },
    stopTyping() {
      if (this.typingTimer) {
        clearInterval(this.typingTimer);
        this.typingTimer = null;
        this.isTyping = false; // 可选：如果你想要在打字完成后启用输入框
      }
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row)); // deep copy to prevent modifying original data
      this.dialogVisible = true;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.load();
    },
  },
};
</script>

<style scoped>
.text-button {
  /* 应用与el-button相似的样式，但移除所有可点击的样式 */
  padding: 8px 15px; /* 假设的padding，根据需要调整 */
  background-color: transparent; /* 透明背景 */
  border: none; /* 移除边框 */
  color: #409eff; /* Element Plus主题色，根据需要调整 */
  font-size: 14px; /* 假设的字体大小，根据需要调整 */
  cursor: default; /* 默认光标，表示不可点击 */
  /* 你可以添加更多样式来匹配你的设计 */
}
</style>
  